//背景图片
class banner {
		constructor(oImg, oLis) {
			this.oImg = oImg;
			this.oLis = oLis;
			this.index = 0;
			this.oImg.style.backgroundImage = `url(./img/imgs/${this.index}.jpg)`;
			this.oLis[this.index].style.backgroundColor = "red";
		}
		setImgBgc() {
			this.oImg.style.backgroundImage = `url(./img/imgs/${this.index}.jpg)`;
		}
		setLisColor() {
			for (let i = 0; i < this.oLis.length; i++) {
				if (i == this.index) {
					this.oLis[i].style.backgroundColor = "red";
				} else {
					this.oLis[i].style.backgroundColor = "white";
				}
			}
		}
		next() {
			this.index++;
			if (this.index == this.oLis.length) {
				this.index = 0;
			}
			this.setImgBgc();
			this.setLisColor();
		}
		previous() {
			this.index--;
			if (this.index == -1) {
				this.index = this.oLis.length - 1;
			}
			this.setImgBgc();
			this.setLisColor();
		}
		onclickLis() {
			let that = this;
			for (let i = 0; i < oLis.length; i++) {
				this.oLis[i].onclick = function() {
					that.index = i;
					that.setImgBgc();
					that.setLisColor();
				}
			}
		}
		autoPlay() {
			let that = this;
			let time = null;
			time = setInterval(function() {
				that.next();
			}, 5500);
			this.oImg.onmouseover = function() {
				clearInterval(time);
			}
			this.oImg.onmouseout = function() {
				time = setInterval(function() {
					that.next();
				}, 5500)
			}
		}
		eventBind() {
			let that = this;
			let nextBtn = document.querySelector("#banner-next");
			nextBtn.onclick = function() {
				that.next();
			}
			let previousBtn = document.querySelector("#banner-previous");
			previousBtn.onclick = function() {
				that.previous();
			}
			this.onclickLis();
			this.autoPlay()
		}
	}
	// mousemove() {
	// 	let that = this;
	// 	let nextBtn = document.querySelector("#banner-next");
	// 	let previousBtn = document.querySelector("#banner-previous");
	// 	this.oImg.onmousemove= function(){
	// 		nextBtn.style.display = "black";
	// 		previousBtn.style.display = "black";
	// 	}
	// }
	// mouseout() {
	// 	let that = this;
	// 	let nextBtn = document.querySelector("#banner-next");
	// 	let previousBtn = document.querySelector("#banner-previous");
	// 	this.oImg.onmouseout= function(){
	// 		nextBtn.style.display = "none";
	// 		previousBtn.style.display = "none";
	// }
	
	let oImg = document.querySelector("#banner");
	let oLis = document.querySelectorAll(".banner-l");
	let b = new banner(oImg, oLis);
	b.eventBind();
	// b.focus();
	// b.blur();
	
	